<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:form id='stores_form'>
		<h:head>
			<style type="text/css" title="currentStyle">
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/datatable_table.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools_JUI.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
			</style>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/jquery.dataTables.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/ZeroClipboard.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/TableTools.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.bgiframe-2.1.2.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.core.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.widget.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.mouse.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.button.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.draggable.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.position.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.resizable.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.ui.dialog.js"></script>
			<script src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery.effects.core.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/stores.js"></script>
				
			<script type="text/javascript" charset="utf-8">
			//<![CDATA[
				var asInitVals = new Array();
				var oTable;
				var aoColumnsVal='';
				for(var i=0; i < #{storesBean.columnsSize};i++)
				{
					aoColumnsVal =aoColumnsVal+ 'null,';
				}
				aoColumnsVal += 'null';
				$(document).ready( function () {
					oTable = $('#table').dataTable( {
						"sScrollY": 400,
						"bJQueryUI": true,
						"sPaginationType": "full_numbers",
						"sDom": 'T<"clear">lfrtip',
						"oTableTools": {
							"sSwfPath": "${facesContext.externalContext.requestContextPath}/resources/swf/datatable/copy_csv_xls_pdf.swf",
							"sRowSelect": "single",
							
							"aButtons": [ "copy", 
							 	             {
								"sExtends": "collection",
								"sButtonText": "Save",
								"aButtons": [ "csv", "xls", "pdf", "print" ]
							 }
							]
						
						},
						#{storesBean.tableData}
					} );
					
					$("tfoot input").keyup( function () {
				        /* Filter on the column (the index) of this element */
				        oTable.fnFilter( this.value, $("tfoot input").index(this) );
				    } );
				     
				    /*
				     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
				     * the footer
				     */
				    $("tfoot input").each( function (i) {
				        asInitVals[i] = this.value;
				    } );
				     
				    $("tfoot input").focus( function () {
				        if ( this.className == "search_init" )
				        {
				            this.className = "";
				            this.value = "";
				        }
				    } );
				     
				    $("tfoot input").blur( function (i) {
				        if ( this.value == "" )
				        {
				            this.className = "search_init";
				            this.value = asInitVals[$("tfoot input").index(this)];
				        }
				    } );
				    
				    
				    
				    
				    $("#dialog_form_edit")
					.dialog(
					{
						autoOpen : false,
						height : 500,
						width : 600,
						modal : true,
						buttons : {
							"Update" : function() {
								$("[id='stores_form:selected_value']").val($("[id='stores_form:edit_store_code']").val());
								$("[id='stores_form:selected_store_code']").val($("[id='stores_form:edit_store_code']").val());
								$("[id='stores_form:selected_store_name']").val($("[id='stores_form:edit_store_name']").val());
								$("[id='stores_form:selected_store_address']").val($("[id='stores_form:edit_store_address']").val());
								$("[id='stores_form:selected_store_suspended']").val($("[id='stores_form:edit_store_suspended']").val());
								$('[id="stores_form:update_store_btn"]').click();
								
							},
							"Delete" : function() {
								$("[id='stores_form:selected_value']").val($("[id='stores_form:edit_store_code']").val());
								$("[id='stores_form:selected_store_code']").val($("[id='stores_form:edit_store_code']").val());
								$("[id='stores_form:selected_store_name']").val($("[id='stores_form:edit_store_name']").val());
								$("[id='stores_form:selected_store_address']").val($("[id='stores_form:edit_store_address']").val());
								$("[id='stores_form:selected_store_suspended']").val($("[id='stores_form:edit_store_suspended']").val());
								
								var name = $("[id='stores_form:selected_store_code']").val();
								var r = confirm("Are you sure to delete Store: "
										+ name + "?");
								if (r != true) {
									return false;
								} else {
									return true;
								}
								
								$('[id="stores_form:delete_store_btn"]').click();
								
							},
							Cancel : function() {
								$(this).dialog("close");
							}

						},
						close : function() {
						}
					});
				    $("#dialog_form_create")
					.dialog(
					{
						autoOpen : false,
						height : 500,
						width : 500,
						modal : true,
						buttons : {
							"Submit" : function() {
								$("[id='stores_form:selected_value']").val($("[id='stores_form:create_store_code']").val());
								$("[id='stores_form:selected_store_code']").val($("[id='stores_form:create_store_code']").val());
								$("[id='stores_form:selected_store_name']").val($("[id='stores_form:create_store_name']").val());
								$("[id='stores_form:selected_store_address']").val($("[id='stores_form:create_store_address']").val());
								$("[id='stores_form:selected_store_suspended']").val($("[id='stores_form:create_store_suspended']").val());
								$('[id="stores_form:create_store_btn"]').click();
								
							},
							Cancel : function() {
								$(this).dialog("close");
							}

						},
						close : function() {
						}
					});
				} );
				
				
				//]]>
			</script>

		</h:head>
		<body>
			<div>
			
			<ui:include src="../../views/header/header.xhtml" />

			<br />
			<br />
			<br />
			
			
			</div>
			
			<div id="items_hidden_div" class="hidden_input" >
				<br/>
				<h:inputText id="selected_value"
					value="#{storesBean.selectedValue}">
				</h:inputText>
				<h:inputText id="selected_store_code"
					value="#{storesBean.editStoreCode}">
				</h:inputText>
				<h:inputText id="selected_store_name"
					value="#{storesBean.editStoreName}">
				</h:inputText>
				<h:inputText id="selected_store_address"
					value="#{storesBean.editAddress}">
				</h:inputText>
				<h:inputText id="selected_store_suspended"
					value="#{storesBean.editSuspended}">
				</h:inputText>
				<br/>
				<h:commandLink id="create_store_btn"
					value="Create Store"
					action="#{storesBean.createStoreAction}">
				</h:commandLink>
				<h:commandLink id="update_store_btn"
					value="update Store"
					action="#{storesBean.updateStoreAction}">
				</h:commandLink>
				<h:commandLink id="delete_store_btn"
					value="delete Store"
					action="#{storesBean.deleteStoreAction}">
				</h:commandLink>
			</div>
			
			<div id="buttons_div">
			 	<button onclick="return createOnClick()">#{msg.store_create}</button>
				<button onclick="return okOnClick()">#{msg.edit_delete}</button>
				<br />
				<br />
				<br />
			</div>

			<div id="demo">
				<table id="table" class="display">
                	
                    <thead>
						<tr>
							<ui:repeat value="#{storesBean.columnNames}" var="columnName">
								<th><h:outputText value="#{columnName}"/></th>
							</ui:repeat>
						</tr>
					
					</thead>
                     
                     <tbody>
                     </tbody>
                     <tr></tr>
                    <tfoot>
                   
                    	<tr>
							<ui:repeat value="#{storesBean.columnNames}" var="columnName">
								<th><input type="text"  value="Search #{columnName}" class="search_init" /></th>
							</ui:repeat>
						</tr>
					
					</tfoot>
					
				</table>
			
			</div>
			
			
			<div id="dialog_form_edit" title="Edit Store">
				<h1></h1>
				<table>
					<tr>
						<td><h:outputLabel value="#{msg.store_code}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_store_code" value="#{storesBean.editStoreCode}" disabled="true">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.store_name}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_store_name" value="#{storesBean.editStoreName}">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.store_address}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_store_address" value="#{storesBean.editAddress}">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.store_suspended}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="edit_store_suspended" value="#{storesBean.editSuspended}">
						</h:inputText>
						</td>
					</tr>

				</table>
			</div>
			
			 
			<div id="dialog_form_create" title="Create">
				<table>
					<tr>
						<td><h:outputLabel value="#{msg.store_code}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="create_store_code" value="#{storesBean.editStoreCode}" >
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.store_name}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="create_store_name" value="#{storesBean.editStoreName}">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.store_address}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="create_store_address" value="#{storesBean.editAddress}">
						</h:inputText>
						</td>
					</tr>
					<tr>
						<td><h:outputLabel value="#{msg.store_suspended}">
							</h:outputLabel></td>
						<td>
						<h:inputText id="create_store_suspended" value="#{storesBean.editSuspended}">
						</h:inputText>
						</td>
					</tr>
				</table>
			</div>
			<ui:include src="../../views/footer/footer.xhtml" />
		</body>


	</h:form>
</f:view>
</html>
